<template>
  <div class="searchBox">
    <p class="searchTitle" v-if="isShowHistoryTitle == true">历史记录检索</p>
    <MkForm :col="4" formId="123">
      <MkInput label="关键字" v-model="_searchParam.keyword" isEdit />
      <el-form-item label="创建时间起始">
        <MkDateTime v-model="_searchParam.startCreationTime" />
      </el-form-item>
      <el-form-item label="创建时间结束">
        <MkDateTime v-model="_searchParam.endCreationTime" />
      </el-form-item>
      <slot></slot>
    </MkForm>
    <!-- <el-form inline>
      <el-row>
        <MkInput label="单号" v-model="_searchParam.keyword" />
        <el-form-item label="检索时间" :itemSpan="2">
          <MkDateTime v-model="_searchParam.startCreationTime" style="width: 48.5% !important;"/>
            <el-icon class="icon"><ele-DArrowRight /></el-icon>
          <MkDateTime v-model="_searchParam.endCreationTime" style="width: 48.5% !important;" />
        </el-form-item>
        <slot></slot>
      </el-row>
    </el-form> -->
    <slot name="btnBox">
      <div>
        <el-button @click="emits('go-back')" v-if="isShowBack == true">返回</el-button>
        <el-button @click="emits('search')" type="primary">检索</el-button>
        <el-button @click="emits('add')" type="primary" v-if="isShowAdd">新增</el-button>
        <slot name="moreBtn" />
      </div>
    </slot>
  </div>
</template>

<script lang='ts' setup>
import { timeFormat } from '/@/utils';

// 检索条件表单
// 使用：<BaseSearchForm v-model:search-param="checkParam" @goBack="emit('goto-edit')" @search="search">
// 如果要在后面加别的检索条件 就 
// <BaseSearchForm v-model:search-param="checkParam" @goBack="emit('goto-edit')" @search="search">
//   <MkInput label="新加检索条件" v-model="checkParam.keyword" />
// </BaseSearchForm>
defineOptions({
  name: 'BaseSearchForm'
})

interface BaseSearchParamType {
  keyword?: string
  startCreationTime?: string
  endCreationTime?: string
}
const props = withDefaults(defineProps<{
  rangeDay?: number,
  isShowBack?: boolean,
  isShowHistoryTitle?: boolean,
  isShowAdd?: boolean,
  searchParam: BaseSearchParamType
}>(), {
  rangeDay: undefined,
  isShowBack: true,
  isShowHistoryTitle: true,
  isShowAdd: false,
  searchParam: () => ({})
});
const emits = defineEmits(['update:searchParam', 'go-back', 'search', 'add'])
const _searchParam = useVModel(props, 'searchParam', emits)

onMounted(() => {
  const curDate = new Date()
  const minusTime = 24 * 60 * 60 * 1000 * (props.rangeDay ?? 0)
  const startTime = new Date(curDate.getTime() - minusTime)
  startTime.setHours(0)
  startTime.setMinutes(0)
  startTime.setSeconds(0)
  startTime.setMilliseconds(0)
  _searchParam.value.startCreationTime = timeFormat(startTime)

  const endTime = new Date()
  endTime.setHours(23)
  endTime.setMinutes(59)
  endTime.setSeconds(59)
  endTime.setMilliseconds(999)
  _searchParam.value.endCreationTime = timeFormat(endTime)
})
</script>

<style lang='scss' scoped>
.searchTitle {
  font-size: 1.2em;
  font-weight: 800;
  margin: 0 0 3px;
}

:deep(.mk-datetime-div) {
  width: 48.5% !important;
  height: 100%;
}

.icon {
  width: 3%;
}


.searchBox :deep(.el-form-item:last-of-type) {
  margin-bottom: 18px !important;
}
</style>